<template>
  <div class="productManage">
    <!-- 批量处理 -->
    <el-row class="batchProcess">
      <el-col :span="4">
        <el-button type="primary" class="bt_blue">批量上架<i class="el-icon-upload2" /></el-button>
        <el-button class="bt_green" type="success">批量下架<i class="el-icon-download" /></el-button>
      </el-col>
    </el-row>
    <!-- 查询操作 -->
    <div class="my_search -ml-20px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="search_form" labelPosition="left">
        <el-form-item label="合同类型：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同状态：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同生效时间：" prop="region">
          <el-date-picker v-model="ruleForm.time" type="date" :clearable="false" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同创建时间：" prop="region">
          <el-date-picker v-model="ruleForm.time" type="date" :clearable="false" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同到期时间：" prop="region">
          <el-date-picker v-model="ruleForm.time" type="date" :clearable="false" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所在省份：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在城市：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="submit_clear">
        <el-button class="bt_gray">查询</el-button>
        <el-button class="bt_White">清空</el-button>
      </div>
    </div>
    <!-- 商品列表 -->
    <el-row class="productList">
      <el-table ref="multipleTable" :data="productList" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="id" label="产品ID" width="90" />
        <el-table-column prop="onlyName" label="产品名称" width="200" />
        <el-table-column prop="userName" label="产品经理" />
        <el-table-column prop="locationName" label="签约站点" />
        <el-table-column prop="releaseTime" label="产品上架时间" />
        <el-table-column prop="productStatusStr" label="产品状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.productStatusStr === '2' ? 'primary' : 'success'" disable-transitions size="mini">
              {{
              scope.row.productStatusStr == 1 ? "未上架" : "售卖中" }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="a" label="佣金分配">
          <template slot-scope="scope">
            {{scope.row.superFirstMoney/100}}-{{scope.row.superFirstMoney/100}}-{{scope.row.superFirstMoney/100}}
          </template>
        </el-table-column>
        <el-table-column prop="onlineNum" label="上架渠道数" />
        <el-table-column prop="saleAmount" label="实际销量" />
        <el-table-column prop="operations" label="操作" width="200">
          <!-- 这里是显示上架还是下架，也要取决于当前商品的上下架状态 是上架就显示下架 反之亦然 -->
          <el-button type="text" size="mini" @click="handlerOpenSheel(11)">上架商品</el-button>
          <!-- 设为爆品需要判断当前商品的商检状态为已上架才显示 -->
          <el-button type="text" size="mini" @click="handlerHotPro">设为爆品</el-button>
          <el-button type="text" size="mini" @click="toProDetail(11)">查看详情</el-button>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 设为爆品的提示确认 -->
    <el-dialog :visible.sync="dialogVisible" width="20%">
      <span>{{ alertComfirm }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="bt_white">取 消</el-button>
        <el-button type="primary" @click="setHotPro(11)" class="bt_blue">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 上下架商品的确认框 -->
    <onOffSheel v-show="isOnSheel" @closeSheel="handlerCloseSheel"></onOffSheel>
  </div>
</template>

<script>
import onOffSheel from "./components/OnOffSheel";
export default {
  name: "productmanage",
  components: {
    onOffSheel,
  },
  data() {
    return {
      ruleForm: { time: "", region: "" },
      rules: {},
      // 站点筛选 改请求
      stations: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      // 站点筛选框响应数据
      stationValue: "",
      // 品类筛选  修改请求
      catagoryList: [
        {
          id: 0,
          name: "全部产品品类",
        },
        {
          id: 131,
          name: "餐饮",
        },
        {
          id: 180,
          name: "酒店景区",
        },
        {
          id: 226,
          name: "生活服务",
        },
        {
          id: 508,
          name: "社区团购",
        },
      ],
      // 品类筛选框响应数据
      catagoryValue: "",
      // 状态筛选下拉框数据 改请求
      proState: [
        {
          id: 0,
          name: "全部产品状态",
        },
        {
          id: 1,
          name: "未上架",
        },
        {
          id: 2,
          name: "售卖中",
        },
      ],
      // 状态筛选框响应数据
      proStateValue: "",
      // 关键词输入框响应数据
      keyWord: "",
      // 商品列表模拟数据 后面需要改成请求
      productList: [
        {
          id: 3288189,
          onlyName: "二轮场景预约加价",
          baseAmount: 5,
          saleAmount: 22,
          superFirstMoney: 100,
          releaseTime: "2021-12-29T17:00:00.000+00:00",
          firstMoney: 100,
          secondMoney: 100,
          cooperationCount: 1,
          userName: "张萱娣(824782)",
          locationName: "成都站",
          productStatusStr: "2",
          onlineNum: 0,
        },
        {
          id: 3288189,
          onlyName: "二轮场景预约加价",
          baseAmount: 5,
          saleAmount: 22,
          superFirstMoney: 100,
          releaseTime: "2021-12-29T17:00:00.000+00:00",

          firstMoney: 100,
          secondMoney: 100,
          cooperationCount: 1,
          userName: "张萱娣(824782)",
          locationName: "成都站",
          productStatusStr: "1",
          onlineNum: 0,
        },
      ],
      multipleSelection: [],
      // 提示确认框
      dialogVisible: false,
      alertComfirm: "",
      // 上下架操作框显示与否
      isOnSheel: false,
    };
  },
  watch: {},
  methods: {
    // 重置搜索框
    resetAll() {
      console.log(this.value);
      this.value = "";
    },
    // 多选框数据变换的事件
    handleSelectionChange(value) {
      console.log("gaibianle", value);
    },
    // 设置爆款的确认框
    handlerHotPro() {
      this.alertComfirm = "确认将所选商品设置为爆品推荐吗";
      this.dialogVisible = true;
    },
    handlerOpenSheel() {
      // 打开上下架操作栏
      this.isOnSheel = true;
    },
    handlerCloseSheel(sheelState) {
      // 关闭上架操作栏
      this.isOnSheel = sheelState;
    },
    // 确定设置为爆款
    setHotPro(id) {
      this.$message.success(`ID为${id}的商品，爆品推荐设置成功`);
      this.dialogVisible = false;
    },
    // 携带id跳转到商品详情页
    toProDetail(id) {
      this.$router.push({ path: "/ProductDetail", query: { id } });
    },
  },
};
</script>

<style scoped lang="scss">
body {
  background: rgb(212, 209, 209);
}

.productManage {
  width: 100%;
  background: #eee;
  padding: 10px;
  border-radius: 4px;

  .my_search {
    display: flex;
    justify-content: space-between;
  }

  .submit_clear {
    display: flex;
  }

  .el-button,
  .el-tag {
    padding-left: 10px;
    padding-right: 10px;
  }

  // 批量操作按钮
  .batchProcess,
  .search {
    margin-bottom: 10px;
  }

  // 商品列表表格
  .productList {
    table {
      tr {
        .el-button {
          margin-left: 3px;
          padding: 0;
        }
      }
    }
  }

  .onOffSheel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 99;
  }
}
</style>
